// store入口文件
import { createStore, Store, useStore as baseUseStore } from "vuex";
import { saveLanguageApi } from "@/api/layout"; // 接口API
import { InjectionKey } from "vue";
import { fetchRoomList } from "@/api/home";
import { fetchRoomDetail } from "@/api/detail";
import { IRoomDetailParams, IRoomListParams } from "@/api/interface";

// 为store state声明类型
export interface AllStateTypes {
  count: number;
  locale: any; // ElementPlus组件中的变量 并不明确变量类型
  userState: number;
  roomList: Array<any>
  pageNo: number,
  pageSize: number,
  total: number,
  cityCode: string,
  roomDetail: any,
  orderVisible: boolean
}

// 定义 Injection Key
export const key: InjectionKey<Store<AllStateTypes>> = Symbol("storeKey");

// 这里表示的是我们定义的userStore
export function useStore() {
  return baseUseStore(key); // 原始的useStore方法
}
export function createSSRStore() {
  return createStore<AllStateTypes>({
    state: {
      count: 1,
      locale: null, // 当前选中的国际化语言包
      userState: 0, // 用户登录状态
      roomList: [], // 房间列表
      pageNo: 1,
      pageSize: 6,
      total: 0,
      cityCode: "",
      roomDetail: {},
      orderVisible: false
    },
    // 同步修改值
    mutations: {
      // 修改count
      setCount(state, payload) {
        state.count += payload;
        return state.count;
      },
      // 保存当前国际化语言的版本
      setLanguage(state, payload) {
        state.locale = payload;
        return state.locale;
      },
      // 保存当前用户登录的状态
      setUserState(state, payload) {
        state.userState = payload;
        return state.userState;
      },
      setRoomList(state, payload) {
        state.roomList = payload;
        return state.roomList;
      },
      setTotal(state, payload) {
        state.total = payload;
        return state.total;
      },
      setCityCode(state, payload) {
        state.cityCode = payload;
        return state.cityCode;
      },
      // 设置房屋详情数据
      setRoomDetail(state, payload) {
        state.roomDetail = payload;
        return state.roomDetail;
      },
      setOrderVisible(state, payload) {
        state.orderVisible = payload;
        return state.orderVisible;
      }
    },
    // 异步修改值
    actions: {
      fetchCount({ commit, state }, payload) {
        setTimeout(() => {
          commit("setCount", payload);
        }, 3000);
      },
      // Mock接口: 保存当前语言包
      saveLanguage({ commit, state }, language: any) {
        saveLanguageApi(language.name).then(res => {
          const { success } = res;
          if (success) {
            // console.log("保存当前语言包成功");
            commit("setLanguage", language);
          }
        });
      },
      // 请求接口-获取首页房屋列表
      getRoomList({ commit, state }, payload: IRoomListParams) {
        let params = {
          pageNo: payload.pageNo,
          pageSize: state.pageSize,
          cityCode: payload.cityCode || state.cityCode
        };
        state.pageNo = params.pageNo;
        return new Promise(resolve => {
          fetchRoomList(params).then((res: any) => {
            const { success, result } = res;
            const orders = result.orders; // 房屋列表的数据
            if (success) {
              commit("setRoomList", orders.data);
              commit("setTotal", result.total);
              // console.log("保存到Vuex中");
              resolve(true);
            }
          });
        });
      },
      // 请求接口-获取房屋信息详情
      getRoomDetail({ commit, state }, payload: IRoomDetailParams) {
        return new Promise((resolve, reject) => {
          fetchRoomDetail(payload).then((res: any) => {
            const { success, result } = res;
            if (success) {
              commit("setRoomDetail", result);
              resolve(true);
            }
          });
        });
      }
    }
  });
}
